<template>
  <div class="flex justify-between w-600">
    <n-checkbox-group v-model:value="checkList">
      <n-list w-500>
        <vue-draggable
          v-model="columnsModel"
          :animation="150"
          handle=".table-column-draggable"
          filter=".selection"
        >
          <template v-for="column in columnsModel">
            <n-list-item v-if="column.type !== 'selection'" :key="column.key">
              <template #prefix>
                <icon
                  class="table-column-draggable cursor-pointer"
                  :class="{
                    selection: column.type === 'selection',
                  }"
                  icon="iconamoon:move-fill"
                />
              </template>
              <template #suffix>
                <n-space :wrap="false" align="center">
                  <icon icon="ri:skip-left-line" />
                  <n-divider vertical />
                  <icon icon="ri:skip-right-line" />
                </n-space>
              </template>
              <n-checkbox
                :value="column.key"
                :label="(column.title as string)"
              />
              {{ column.key }}
            </n-list-item>
          </template>
        </vue-draggable>
      </n-list>
    </n-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { VueDraggable } from "vue-draggable-plus";

const columnsModel = ref([
  {
    title: "序号",
    key: "no",
    width: 60,
    fixed: "left",
    align: "center",
  },
  {
    title: "试卷名称",
    key: "title",
    width: 120,
    ellipsis: { tooltip: true },
  },
  {
    title: "题目数",
    key: "count",
    width: 120,
    ellipsis: { tooltip: true },
  },
  {
    title: "所属教师",
    key: "teacherId",
    width: 120,
    ellipsis: { tooltip: true },
  },
]);
</script>
